<template>
  <div class="app-container flex column">
    <top-title :updateTime="false" :content="content"></top-title>

    <div class="table-wrap f1">
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">设备MN码:</div>
          <div class="input-item">
            <j-input :maxLength="30" clearable v-model="queryParam.mn" placeholder="请输入设备MN码" />
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">设备状态:</div>
          <div class="input-item">
            <a-select ref="select" allowClear v-model="queryParam.status" placeholder="请选择设备状态">
              <a-select-option value="1">未绑定</a-select-option>
              <a-select-option value="2">已启用</a-select-option>
              <a-select-option value="3">已移除</a-select-option>
            </a-select>
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">提交时间:</div>
          <div class="time-item">
            <start-end-time
              :times="times"
              :showTime="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              @timeChange="timeChange"
              :resetTime="resetTime"
            ></start-end-time>
          </div>
        </div>

        <div class="btn-wrap">
          <a-button
            class="searchBtn"
            @click="searchQuery(queryParam.createTime_begin, queryParam.createTime_end)"
            type="primary"
          >
            搜索
          </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
        </div>

        <div class="btn-group" v-if="mnFlag">
          <a-button class="searchBtn" @click="addEditModal" type="primary">添加MN码</a-button>
        </div>
      </div>

      <a-table
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <!-- <template v-slot:action="records">
          <span class="operation deatil-color" @click="detail(records)">详情</span>
        </template> -->
      </a-table>
    </div>
    <MN ref="mn" @success="searchQuery"></MN>
  </div>
</template>

<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import topTitle from '@/components/topTitle'
import MN from './model/mnModel'
import JInput from '@/components/jeecg/JInput'
export default {
  name: '',
  components: { startEndTime, topTitle, MN, JInput },
  mixins: [JeecgListMixin],
  data() {
    return {
      content: [['备案管理'], ['设备MN码']],
      mnFlag: true,
      url: {
        list: `/factory/device_mn/page?factoryId=${this.$route.query.id}`,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '设备MN码',
          align: 'center',
          dataIndex: 'mn',
        },
        {
          title: '添加人员',
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: '添加时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '设备状态',
          align: 'center',
          dataIndex: 'status_dictText',
        },
        // {
        //   title: '操作',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
    }
  },
  mounted() {
    if (typeof this.$route.query.mnFlag == 'string') {
      this.mnFlag = JSON.parse(this.$route.query.mnFlag)
    }
  },
  methods: {
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.createTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.createTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.createTime_begin = null
        this.queryParam.createTime_end = null
      }
    },

    addEditModal() {
      this.$refs.mn.show()
    },
  },
  destroy() {},
}
</script>

<style scoped lang="less">
.app-container {
  .table-wrap {
    background: #045053;
    padding-top: 0.2rem;
    margin: 0 0.16rem;
  }
}
</style>
